<template>
  <div class="wiremap">
    <div class="render" ref="render"></div>
    <div class="fullScreen">
      <i class="el-icon-full-screen" @click="fullScreen"></i>
    </div>
  </div>
</template>

<script>
import { ButtonGroup, Button } from "element-ui";
import graph from "./render";
import modal from "./modal/";
export default {
  name: "WireMap",
  props: {
    picId: {
      type: String,
      default: 27
    },
    iconMore: {
      type: String,
      default: "md-help"
    },
    keyId: {
      type: String,
      default: ""
    }
  },
  components: { ButtonGroup, Button },

  watch: {
    picId(val) {
      if (val) {
        graph.initRender(this.$refs.render, val);
      }
    },
    keyId(val) {
      if (val) {
        // graph.initRender(this.$refs.render, val);
      }
    }
  },
  methods: {
    toolBackEvent(type) {
      const currId = graph.picId;
      const arrIds = graph.cachePicId;
      if (arrIds.length === 0) return;

      const index = arrIds.indexOf(currId);
      switch (type) {
        case "home":
          if (this.picId !== currId) {
            graph.initRender(this.$refs.render, this.picId);
            graph.cachePicId = [];
          }
          break;
        case "back":
          if (index > 0) {
            graph.initRender(this.$refs.render, arrIds[index - 1]);
          }
          if (index === -1) {
            graph.initRender(this.$refs.render, arrIds[arrIds.length - 1]);
            graph.cachePicId.push(currId);
          }
          break;
        case "next":
          if (index !== -1 && index < arrIds.length - 1) {
            graph.initRender(this.$refs.render, arrIds[index + 1]);
          }
          break;
        default:
      }
    },
    toolMoreEvent(type) {
      this.$emit("on-" + type);
    },
    resizeCanvas() {
      graph.resizeRender();
    },
    // 全屏展示
    fullScreen() {
      const renderEl = document.querySelector(".render")
      if (renderEl.requestFullscreen) {
        renderEl.requestFullscreen().then(() => graph.resizeRender());
      }
    }
  },
  mounted() {
    if (this.picId) {
      modal.appendNode = this.$el;
      graph.initRender(this.$refs.render, this.picId);
    }
    window.addEventListener("resize", this.resizeCanvas);
  },
  beforeDestroy() {
    graph.disposeRender();
    modal.destoryModal();
    window.removeEventListener("resize", this.resizeCanvas);
  }
};
</script>
<style lang="scss" scoped>
.wiremap {
  width: 100%;
  height: 100%;

  .render {
    height: calc(100vh - 80px);
    width: 90%;
    margin: 0 auto;
    position: relative;
    border-radius: 12px;
    background-color: #fff;
  }

  .fullScreen {
    position: fixed;
    top: 100px;
    right: 50px;
    background: rgba(0, 0, 0, .2);
    width: 36px;
    height: 36px;
    border-radius: 6px;

    i {
      display: block;
      font-size: 18px;
      margin: 10px auto;
      color: #fff;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
